import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform,
} from 'react-native';
import Mask from 'bee/components/Mask';
import { px2dp } from 'bee/utils/px2dp';
import { colors, sizes } from 'bee/themes';
import { Languages } from 'bee/constants/Languages';
import PropTypes from 'prop-types';

export default class Picker extends Component {
  static propTypes = {
    takePhoto: PropTypes.func.isRequired,
    selectFromAlbum: PropTypes.func.isRequired,
    children: PropTypes.element.isRequired,
  };

  close() {
    this.mask.close();
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Mask
          contentPosition="bottom"
          ref={mask => {
            this.mask = mask;
          }}
        >
          <TouchableOpacity
            onPress={() => {
              this.mask.open();
            }}
          >
            {this.props.children}
          </TouchableOpacity>

          <View>
            <Text
              style={styles.takePhoto}
              onPress={() => {
                this.props.takePhoto(() => {
                  this.mask.close();
                });
                // this.mask.close();
              }}
            >
              {Languages.takePhoto}
            </Text>
            <Text
              style={styles.takePhoto}
              onPress={() => {
                this.props.selectFromAlbum(() => {
                  this.mask.close();
                });
                // this.mask.close();
              }}
            >
              {Languages.selectFromAlbum}
            </Text>
            <Text
              style={[styles.takePhoto, { marginTop: px2dp(20) }]}
              onPress={() => {
                // this.mask.close();
              }}
            >
              {Languages.cancel}
            </Text>
          </View>
        </Mask>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  takePhoto: {
    height: px2dp(80),
    backgroundColor: colors.white,
    borderColor: colors[1104],
    borderBottomWidth: StyleSheet.hairlineWidth,
    textAlign: 'center',
    textAlignVertical: 'center',
    fontSize: sizes.f2,
    color: colors[1103],
    // 解决iOS端文字不能垂直居中的问题
    ...Platform.select({
      ios: {
        lineHeight: px2dp(80),
      },
      android: {},
    }),
  },
});
